<template>
  <div class="echart-dom">
    <div class="echart-title">
      <div class="titleborder">
        <div style="display: flex">
          <div class="divider"></div>
          <div class="tltle">保洁单位保洁道路等级情况统计</div>
        </div>
        <span>
          <!-- 全屏图标按钮 -->
          <i
            class="el-icon-rank"
            style="
              font-size: 22px;
              transform: rotate(45deg);
              color: #fff;
              cursor: pointer;
              position: absolute;
              top: 5px;
              right: 10px;
              z-index: 5;
            "
            title="全屏"
            @click="fullSc()"
        /></span>
      </div>
    </div>
    <div class="header">
      <el-select
        v-model="cleancompany"
        clearable
        placeholder="保洁单位"
        @change="handleChangeCleanCompany"
        size="mini"
        style="width: 11vw"
      >
        <el-option
          v-for="dict in dict.type.sys_cleancompany"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        >
        </el-option>
      </el-select>
    </div>
    <div id="domCart4" style="width: 100%; height: 100%"></div>
    <el-dialog
      title="保洁单位保洁道路等级情况统计"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      @fullscreenchange="handleFullscreenChange"
      @closed="closed"
      center
    >
      <div class="header">
        <el-select
          v-model="cleancompany"
          clearable
          placeholder="保洁单位"
          @change="handleChangeCleanCompany"
          size="mini"
          style="width: 11vw"
        >
          <el-option
            v-for="dict in dict.type.sys_cleancompany"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          >
          </el-option>
        </el-select>
      </div>
      <div
        id="domCart44"
        ref="fullChart"
        :style="'width:100%;height:' + (screenHeight - 110) + 'px'"
      ></div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoadClassStatisticsSum } from "../../api/statistics/road";
import * as echarts from "echarts";
import { getDicts } from "../../api/system/dict/data";
import { EleResize } from "@/utils/esresize"; // 图表自适应
var myChart;
export default {
  data() {
    return {
      chartData1: [],
      chartData2: [],
      xAxisArr: [],
      where: "1=1",
      cleancompany: "侨银城市管理股份有限公司",
      dialogVisible: false,
      screenHeight: window.innerHeight,
    };
  },
  dicts: ["sys_roadclass_js", "sys_cleancompany"],
  // 监听screenHeight大小，从而改变全屏画图容器的大小
  watch: {
    screenHeight(val) {
      this.screenHeight = val;
    },
  },
  mounted() {
    let _self = this;
    _self.getData();
    // 获取浏览器窗口大小
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight;
        this.screenHeight = window.screenHeight;
      })();
    };
  },

  methods: {
    async getData(cleanCompany) {
      let _self = this;
      _self.chartData1 = [];
      _self.chartData2 = [];
      _self.xAxisArr = [];
      // 利用字典方法获取道路等级中所有数据
      const dictRes = await getDicts("sys_roadclass_js");
      if (dictRes.code != 200 && dictRes.data.length == 0)
        return this.$message.error("字典获取失败，请联系管理员！");
      console.log(dictRes);
      // 获取数据
      const res = await getRoadClassStatisticsSum({
        cleancompany: cleanCompany ? cleanCompany : _self.cleancompany,
      });
      if (res.code != 200 && res.data.length == 0)
        return this.$message.error("统计信息失败，请联系管理员！");
      // 利用 for 循环将将数组中的元素提取到 element中
      for (let index = 0; index < res.data.length; index++) {
        const element = res.data[index];
        // 使用 filter 方法，通过筛选 dictRes.data 数组，找到与当前道路分配匹配的字典数据
        const newDicts = dictRes.data.filter(
          (dictItem) => dictItem.dictValue === element.roadclass_js
        );
        let roadclassName =
          newDicts.length == 0
            ? element._self.roadclass_js
            : newDicts[0].dictLabel;
        // 存放道路等级中文名称
        _self.xAxisArr.push(roadclassName);
        // 存放对应的道路长度
        _self.chartData1.push(element.length);
        // 存放对应的道路面积
        _self.chartData2.push((element.totalarea / 10000).toFixed(2));
      }
      _self.initChart4(document.getElementById("domCart4"));
    },
    initChart4(domCart4) {
      let _self = this;
      let app = {};
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();
      }
      myChart = echarts.init(domCart4);
      let option;
      // 图表自适应
      const listener = function () {
        myChart.resize();
      };
      EleResize.on(domCart2, listener);
      const posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right",
          },
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom",
          },
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {}),
        },
        distance: {
          min: 0,
          max: 100,
        },
      };
      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance,
          };
          myChart.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          });
        },
      };
      const labelOption = {
        show: false,
        rotate: app.config.rotate,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        position: app.config.position,
        distance: app.config.distance,
        fontSize: 16,
        color: "black",
        rich: {
          name: {},
        },
      };
      option = {
        grid: {
          left: 45,
          right: 55,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          x: "3px",
          data: ["道路长度", "道路面积"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: _self.xAxisArr,
            axisLabel: {
              fontSize: 14,
              color: "black",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "道路长度(m)",
            axisLabel: {
              interval: 0, //代表显示所有x轴标签显示
              rotate: 45, //代表逆时针旋转45度
              color: "black",
              fontSize: 12,
              formatter: "{value}",
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: "道路面积(万㎡)",
            axisLabel: {
              interval: 0, //代表显示所有x轴标签显示
              rotate: -45, //代表逆时针旋转45度
              color: "black",
              fontSize: 12,
              formatter: "{value}",
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "道路长度",
            type: "bar",
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + "米";
              },
            },
            data: _self.chartData1,
          },
          {
            name: "道路面积",
            type: "bar",
            yAxisIndex: 1,
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + "万平方米";
              },
            },
            data: _self.chartData2,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 添加 handlefullscreenchange 方法处理全屏切换事件
    handleFullscreenChange() {
      this.dialogVisible = true;
      if (isFullscreen) {
        this.$nextTick(() => {
          const chartFul = this.$refs.fullChart;
          if (chartFul) {
            this.initChart4(document.getElementById("domCart44"));
          }
        });
      }
    },
    // 点击全屏图标按钮弹框画图
    fullSc() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        const chartFul = this.$refs.fullChart;
        if (chartFul) {
          this.initChart4(document.getElementById("domCart44")); // 画图
        }
      });
    },
    async handleChangeCleanCompany(value) {
      await this.getData(value);
      if (this.dialogVisible && this.$refs.fullChart) {
        this.initChart4(document.getElementById("domCart44"));
      }
    },
    closed() {
      console.log("closed");
      this.getData(this.roadclass_js);
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  //display: flex;
  //justify-content: space-between;
  position: absolute;
  right: 0.2vw;
  margin-bottom: 10px;
  z-index: 999;
}
#domCart4 {
  left: 10px;
  width: 100%;
  height: 100%;
  padding: 15px;
}

.echart-dom {
  //height: 32%;
  margin-bottom: 10px;
  height: 100%;
  width: 100%;
}

.echart-title {
  padding-bottom: 2px;
  //   padding-top: 2px;
  //margin-left: -6px;
  width: 100%;
  //   padding-left: 4px;
  height: 38px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  display: flex;
  align-content: center;
  align-items: center;
}

.titleborder {
  padding-left: 16px;
  width: inherit;
  height: 38px;
  /* background: -webkit-gradient(linear, left top, right top, from(#008cce), to(#1b678b)); */
  /*background: linear-gradient(90deg, #1890ff 0%, #1890ffc7 100%);*/
  background: linear-gradient(90deg, #3399cc 0%, #3399cc 100%);
  opacity: 1;
  display: flex;
}

.divider {
  width: 4px;
  height: 18px;
  background: #ffffff;
  opacity: 1;
  margin-top: 9px;
  margin-left: 8px;
}

.tltle {
  height: 24px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-top: 6px;
  margin-left: 8px;
}
</style>
